<template>
	<div>
    <!-- 卡片视图 -->
    <el-card class="box-card">
		<el-row>
			<el-col :span="3" :offset="8"><el-button size="medium" type="primary" icon="el-icon-user" @click="showDialog3">添加用户</el-button></el-col>
			<el-col :span="3">
				<!-- 导入新生 -->
				<el-upload
				class="upload-demo"
				action="/api/user/users-insert"
				accept=".xlsx,.xls"
				name="uploadFile"
				>
				<el-button size="medium" type="primary" icon="el-icon-user">导入新生</el-button>
				<template #tip>
					<div class="el-upload__tip">
						只能上传 xlsx 文件，且不超过 5MB
					</div>
				</template>
				</el-upload>
			</el-col>
		</el-row>
      <!-- 角色列表区域 -->
      <el-table :data="userList" stripe >
		  <el-table-column label="" width="30px" ></el-table-column>
        <el-table-column label="用户名" prop="userName" width="300px" ></el-table-column>
        <el-table-column label="角色" prop="roleName" ></el-table-column>
        <el-table-column label="操作" width="300px" align="center">
			<template #default="scope">
            <el-button size="small" type="warning" icon="el-icon-setting" @click="showDialog1(scope.row.userName)">修改角色</el-button>
			<el-button size="small" type="danger" icon="el-icon-delete" @click="showDialog2(scope.row.userName)">删除用户</el-button>
			</template>
        </el-table-column>
      </el-table>
	  <!-- 分页器 -->
        <el-pagination layout="total,prev, pager, next,jumper" :total="totalPageNum1" :page-size="pageRequest.pageSize" @current-change="handleCurrentChange" />
    </el-card>

    <!-- 修改角色对话框 -->
    <el-dialog v-model="dialogTableVisible1" title="修改角色"  width="40%" center>
		<el-form
		ref="form"
		:model="form"
		:rules="rules"
		label-width="80px"
		class="demo-ruleForm">
		<el-form-item label="角色：" prop="roleName">
			<el-radio-group v-model="form.roleName">
				<el-radio label="学校管理人员"></el-radio>
				<el-radio label="学校财物部"></el-radio>
				<el-radio label="学校事务部"></el-radio>
				<el-radio label="新生"></el-radio>
				<el-radio label="高年级学生"></el-radio>
				<el-radio label="系统管理员"></el-radio>
			</el-radio-group>
		</el-form-item>
		</el-form>
      <template #footer>
		<el-button type="primary" @click="submitForm1('form')">确 定</el-button>
        <el-button @click="dialogTableVisible1 = false">取 消</el-button>
      </template>
    </el-dialog>

	<!-- 删除用户对话框 -->
	<el-dialog v-model="dialogTableVisible2" title="删除用户"  width="30%" center>
		确定删除用户
      <template #footer>
		<el-button type="primary" @click="deleteUser">确 定</el-button>
        <el-button @click="dialogTableVisible2 = false">取 消</el-button>
      </template>
    </el-dialog>

	<!-- 添加用户对话框 -->
	<el-dialog v-model="dialogTableVisible3" title="添加用户"  width="40%" center>
		<el-form
		ref="form"
		:model="form"
		:rules="rules"
		label-width="80px"
		class="demo-ruleForm">
		<el-form-item label="用户名：" prop="userName">
			<el-input v-model="form.userName" placeholder="请输入用户名" />
		</el-form-item>
		<el-form-item label="密码：" prop="passWord">
			<el-input v-model="form.passWord" placeholder="请输入密码" show-password />
		</el-form-item>
		<el-form-item label="角色：" prop="roleName">
			<el-radio-group v-model="form.roleName">
				<el-radio label="学校管理人员"></el-radio>
				<el-radio label="学校财物部"></el-radio>
				<el-radio label="学校事务部"></el-radio>
				<el-radio label="新生"></el-radio>
				<el-radio label="高年级学生"></el-radio>
				<el-radio label="系统管理员"></el-radio>
			</el-radio-group>
		</el-form-item>
		</el-form>
      <template #footer>
		<el-button type="primary" @click="submitForm('form')">确 定</el-button>
        <el-button @click="dialogTableVisible3 = false">取 消</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import request from '../../utils/request'
import { ElMessage } from 'element-plus';
import qs from 'qs'

export default {
	data() {
		return {
			// 所有角色列表数据
			userList: [],
			userName: '',
			i: 0,
			pageRequest: {
				'pageNum': 1,
				'pageSize': 7,
				'like': ''
			},
			totalPageNum1: 0,
			input1: '',
			input2: '',
			form: {
				userName: '',
				roleName: '',
				passWord: '',
			},
			dialogTableVisible1: false,
			dialogTableVisible2: false,
			dialogTableVisible3: false,
			rules: {
				userName: [
					{required: true,message: '请输入用户名',trigger: 'blur'},
				],
				passWord: [
					{required: true,message: '请输入密码',trigger: 'blur'},
					{
						min: 6,
						message: '长度需要大于6',
						trigger: 'blur',
					},
				],
				roleName: [
					{required: true,message: '请选择角色',trigger: 'change'},
				],
			}
		}
	},
	created() {
		this.getUser();
	},
	methods: {
		// 展示分配权限窗口
		showDialog1(userName) {
			this.dialogTableVisible1 = true;
			this.userName = userName;
		},
		showDialog2(userName) {
			this.dialogTableVisible2 = true;
			this.userName = userName;
		},
		showDialog3() {
			this.dialogTableVisible3 = true;
		},
		// 删除用户
		deleteUser() {
			request({
				method: 'post',
				url: '/api/user/delete-manager',
				headers: {
					'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
				},
				data: qs.stringify({
					'userName': this.userName
				})
			}).then(res => {
				if (res.code === 200) {
					ElMessage.success('删除成功')
					this.getUser()
					this.dialogTableVisible2 = false
				}
			})
		},
		updateUser() {
			request({
				method: 'post',
				url: '/api/user/update',
				headers: {
					'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
				},
				data: qs.stringify({
					'userName': this.userName,
					'roleName': this.form.roleName
				})
			}).then(res => {
				if (res.code === 200) {
					ElMessage.success('修改成功')
					this.getUser()
					this.dialogTableVisible1 = false
				}
			})
		},
		// 添加用户
		addUser() {
			request({
				method: 'post',
				url: '/api/user/insert-manager',
				headers: {
					'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
				},
				data: qs.stringify({
					'userName': this.form.userName,
					'passWord': this.form.passWord,
					'roleName': this.form.roleName
				})
			}).then(res => {
				if (res.code === 200) {
					this.dialogTableVisible3 = false
					ElMessage.success('添加成功')
					this.getUser()
				}
			})
		},
		// 获取管理角色列表
		getUser() {
			request.post('/api/user/get-user',this.pageRequest).then(res => {
				this.userList = res.data.list
				this.totalPageNum1 = res.data.total
			})
		},
		handleCurrentChange(val) {
			this.pageRequest.pageNum = val
			this.getUser()
		},
		submitForm(form) {
			// eslint-disable-next-line consistent-return
			this.$refs[form].validate((valid) => {
				if (valid) {
					this.addUser()
				} else {
					return false
				}
			})
		},
		submitForm1(form) {
			// eslint-disable-next-line consistent-return
			this.$refs[form].validate((valid) => {
				if (valid) {
					this.updateUser()
				} else {
					return false
				}
			})
		},
	}
}
</script>

<style lang="less" scoped>
.box-card {
    height: 590px;
}

</style>
